<template>
    <div class="login">
        <form class="login_form" @submit.prevent="onSubmit">

            <div class="login_form_title">
                <h3>Login</h3>
            </div>

            <!--手机号-->
            <div class="form_item phone">
                <input v-model="form.phone" placeholder="Phone" type="number" />
            </div>

            <!--密码-->
            <div v-if="loginByPassword" class="form_item password">
                <input v-model="form.password" placeholder="Password" type="password" />
            </div>

            <!--验证码-->
            <div v-else class="form_item valid_code">
                <input v-model="form.code" placeholder="Valid Code" type="text" />
                <span @click.stop.prevent="getMsgCode" :class="{'has_send':countdown > 0}" class="countdown">{{ countdown > 0 ? (countdown + 'S') : 'Send' }}</span>
            </div>

            <!--登录-->
            <div class="form_item btn_submit">
                <button :class="{'disabled':disabledSubmit}" type="submit">Login</button>
            </div>

            <!--切换登录方式-->
            <div class="form_item switch_login">
                <a v-if="loginByPassword" @click="loginByPassword = false" href="javascript:void(0);">Valid Code Login</a><!--验证码登录-->
                <a v-else @click="loginByPassword = true" href="javascript:void(0);">Password Login</a><!--密码登录-->
            </div>

        </form>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
[data-page=login] {
    body {
        background: #F7F6F5;
    }
}
</style>

<style lang="scss" scoped>
@import "~@/assets/scss/function.scss";

.login{
    padding: 100px 30px 30px;
    position: relative;
    &::before {
        content: "";
        display: block;
        width: 100%;
        height: 350px;
        background: $primary;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 0 0 20px 20px;
    }

    .login_form {
        display: block;
        padding: 30px;
        background: #fff;
        border-radius: 8px;
        position: relative;
        z-index: 2;

        .login_form_title {
            margin: 58px 0 74px;
            h3 {
                font-size: 48px;
            }
        }

        .form_item {
            position: relative;
            margin-bottom: 32px;
        }

        input {
            height: 96px;
            line-height: 96px;
            width: 100%;
            border-radius: 16px;
            border: 1px solid #ddd;
            padding: 30px 30px 30px 82px;
            background: transparent 30px center/32px no-repeat;
        }

        .phone {
            input {
                background-image: url("~@/assets/imgs/login/phone.svg");
            }
        }
        .password {
            input {
                background-image: url("~@/assets/imgs/login/password.svg");
            }
        }
        .valid_code {
            input {
                background-image: url("~@/assets/imgs/login/valid-code.svg");
            }
        }

        .countdown {
            height: 48px;
            line-height: 48px;
            border-radius: 44px;
            position: absolute;
            top: 24px;
            right: 20px;
            background: $primary;
            color: #fff;
            font-size: 24px;
            padding: 0 26px;
            min-width: 120px;
            text-align: center;
            &.has_send {
                background: #ccc;
            }
        }

        .btn_submit {
            margin-top: 80px;
            button {
                background: $primary;
                color: #fff;
                width: 100%;
                height: 88px;
                line-height: 88px;
                border-radius: 44px;
                font-size: 32px;
            }
            .disabled {
                background: #ccc;
            }
        }

        .switch_login {
            text-align: center;
            a {
                color: #333;
            }
        }

    }

}
</style>
